<template>
  <!-- Medicine Pirce -->
  <div class="subtotal">
    <div class="sub_title">
      <div class="title_font">{{name}}</div>
    </div>
    <div class="sub_newslist" v-for="(item,index) in newslist" :key="index">
      <nuxt-link target="_blank" :to="'/newsDetails/' + item.id + '.html'">
        <div class="sub_news_title">{{item.name}}</div>
      </nuxt-link>
      <div class="sub_news_title sub_news_title2" v-html="subfont(item)"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["name", "newslist"],
  methods: {
    subfont (item) {
      const detailsHref = '/newsDetails/' + item.id + '.html'
      if (null != item.content) {
        if (item.content.length > 200) {
          return item.content.replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim().slice(0, 200) + '...' + '<a rel="nofollow" href="' + detailsHref + '"></a>'
        } else {
          return item.content + '<a rel="nofollow" href="' + detailsHref + '"></a>'
        }
      } else {
        return ''

      }
    }
  },
}


</script>

<style lang="scss" scoped>
.subtotal {
  margin-top: 32px;
  padding-right: 24px;
  .sub_title {
    border-bottom: 1px solid #cbd1d7;
    .title_font {
      font-weight: bold;
      font-size: 18px;
      color: #0041a3;
      line-height: 62px;
      border-bottom: 4px solid #0041a3;
      width: max-content;
    }
  }
  .sub_newslist {
    margin-top: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e8eb;
    .sub_news_title {
      font-weight: bold;
      font-size: 16px;
      color: #2e343e;
      line-height: 24px;

      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      white-space: normal;
      -webkit-line-clamp: 1;
    }
    .sub_news_title2 {
      font-weight: 400;
      color: #616469;
      margin-top: 8px;
    }
  }
}
</style>